<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- 
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License. 
-->
<html>
<head>
    <link type="text/css" rel="stylesheet" href="https://struts.apache.org/css/default.css">
    <style type="text/css">
        .dp-highlighter {
            width:95% !important;
        }
    </style>
    <style type="text/css">
        .footer {
            background-image:      url('https://cwiki.apache.org/confluence/images/border/border_bottom.gif');
            background-repeat:     repeat-x;
            background-position:   left top;
            padding-top:           4px;
            color:                 #666;
        }
    </style>
    <link href='https://struts.apache.org/highlighter/style/shCoreStruts.css' rel='stylesheet' type='text/css' />
    <link href='https://struts.apache.org/highlighter/style/shThemeStruts.css' rel='stylesheet' type='text/css' />
    <script src='https://struts.apache.org/highlighter/js/shCore.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushPlain.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushXml.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushJava.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushJScript.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushGroovy.js' type='text/javascript'></script>
    <script src='https://struts.apache.org/highlighter/js/shBrushBash.js' type='text/javascript'></script>
    <script type="text/javascript">
        SyntaxHighlighter.defaults['toolbar'] = false;
        SyntaxHighlighter.all();
    </script>
    <script type="text/javascript" language="javascript">
        var hide = null;
        var show = null;
        var children = null;

        function init() {
            /* Search form initialization */
            var form = document.forms['search'];
            if (form != null) {
                form.elements['domains'].value = location.hostname;
                form.elements['sitesearch'].value = location.hostname;
            }

            /* Children initialization */
            hide = document.getElementById('hide');
            show = document.getElementById('show');
            children = document.all != null ?
                    document.all['children'] :
                    document.getElementById('children');
            if (children != null) {
                children.style.display = 'none';
                show.style.display = 'inline';
                hide.style.display = 'none';
            }
        }

        function showChildren() {
            children.style.display = 'block';
            show.style.display = 'none';
            hide.style.display = 'inline';
        }

        function hideChildren() {
            children.style.display = 'none';
            show.style.display = 'inline';
            hide.style.display = 'none';
        }
    </script>
    <title>ajax div template</title>
</head>
<body onload="init()">
<table border="0" cellpadding="2" cellspacing="0" width="100%">
    <tr class="topBar">
        <td align="left" valign="middle" class="topBarDiv" align="left" nowrap>
            &nbsp;<a href="home.html">Home</a>&nbsp;&gt;&nbsp;<a href="guides.html">Guides</a>&nbsp;&gt;&nbsp;<a href="tag-developers-guide.html">Tag Developers Guide</a>&nbsp;&gt;&nbsp;<a href="struts-tags.html">Struts Tags</a>&nbsp;&gt;&nbsp;<a href="ui-tags.html">UI Tags</a>&nbsp;&gt;&nbsp;<a href="themes-and-templates.html">Themes and Templates</a>&nbsp;&gt;&nbsp;<a href="ajax-theme.html">ajax theme</a>&nbsp;&gt;&nbsp;<a href="ajax-div-template.html">ajax div template</a>
        </td>
        <td align="right" valign="middle" nowrap>
            <form name="search" action="https://www.google.com/search" method="get">
                <input type="hidden" name="ie" value="UTF-8" />
                <input type="hidden" name="oe" value="UTF-8" />
                <input type="hidden" name="domains" value="" />
                <input type="hidden" name="sitesearch" value="" />
                <input type="text" name="q" maxlength="255" value="" />
                <input type="submit" name="btnG" value="Google Search" />
            </form>
        </td>
    </tr>
</table>

<div id="PageContent">
    <div class="pageheader" style="padding: 6px 0px 0px 0px;">
        <!-- We'll enable this once we figure out how to access (and save) the logo resource -->
        <!--img src="/wiki/images/confluence_logo.gif" style="float: left; margin: 4px 4px 4px 10px;" border="0"-->
        <div style="margin: 0px 10px 0px 10px" class="smalltext">Apache Struts 2 Documentation</div>
        <div style="margin: 0px 10px 8px 10px"  class="pagetitle">ajax div template</div>

        <div class="greynavbar" align="right" style="padding: 2px 10px; margin: 0px;">
            <a href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=14295">
                <img src="https://cwiki.apache.org/confluence/images/icons/notep_16.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Edit Page"></a>
            <a href="https://cwiki.apache.org/confluence/pages/editpage.action?pageId=14295">Edit Page</a>
            &nbsp;
            <a href="https://cwiki.apache.org/confluence/pages/listpages.action?key=WW">
                <img src="https://cwiki.apache.org/confluence/images/icons/browse_space.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Browse Space"></a>
            <a href="https://cwiki.apache.org/confluence/pages/listpages.action?key=WW">Browse Space</a>
            &nbsp;
            <a href="https://cwiki.apache.org/confluence/pages/createpage.action?spaceKey=WW&fromPageId=14295">
                <img src="https://cwiki.apache.org/confluence/images/icons/add_page_16.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Add Page"></a>
            <a href="https://cwiki.apache.org/confluence/pages/createpage.action?spaceKey=WW&fromPageId=14295">Add Page</a>
            &nbsp;
            <a href="https://cwiki.apache.org/confluence/pages/createblogpost.action?spaceKey=WW&fromPageId=14295">
                <img src="https://cwiki.apache.org/confluence/images/icons/add_blogentry_16.gif"
                     height="16" width="16" border="0" align="absmiddle" title="Add News"></a>
            <a href="https://cwiki.apache.org/confluence/pages/createblogpost.action?spaceKey=WW&fromPageId=14295">Add News</a>
        </div>
    </div>

    <div class="pagecontent">
        <div class="wiki-content">
            <div id="ConfluenceContent"><div class="confluence-information-macro confluence-information-macro-note"><span class="aui-icon aui-icon-small aui-iconfont-warning confluence-information-macro-icon"></span><div class="confluence-information-macro-body"><p>The Ajax theme is experimental. Feedback is appreciated.</p></div></div>

<p>The ajax <a shape="rect" href="https://cwiki.apache.org/confluence/pages/viewpage.action?pageId=27272">div</a> template provides a much more interesting div rendering option that the other themes do. Rather than simply rendering a <code>&lt;div&gt;</code> tag, this template relies on advanced AJAX features provided by the <a shape="rect" class="external-link" href="http://dojotoolkit.org" rel="nofollow">Dojo Toolkit</a>. While the <a shape="rect" href="https://cwiki.apache.org/confluence/pages/viewpage.action?pageId=27272">div</a> tag could be used outside of the <a shape="rect" href="ajax-theme.html">ajax theme</a>, it is usually not very useful. See the <a shape="rect" href="https://cwiki.apache.org/confluence/pages/viewpage.action?pageId=27272">div</a> tag for more information on what features are provided.</p>

<h2 id="ajaxdivtemplate-Features">Features</h2>

<p>The remote div has a few features, some of which can be combined with the <a shape="rect" href="a.html">a</a> tag and the <a shape="rect" href="ajax-a-template.html">ajax a template</a>. These uses are:</p>
<ul><li>Retrieve remote data</li><li>Initialize the div with content before the remote data is retrieved</li><li>Display appropriate error and loading messages</li><li>Refresh data on a timed cycle</li><li>Listen for events and refresh data</li><li>JavaScript control support</li></ul>


<h2 id="ajaxdivtemplate-RetrieveRemoteData">Retrieve Remote Data</h2>

<p>The simplest way to use the div tag is to provide an <em>href</em> attribute. For example:</p>
<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: xml; gutter: false; theme: Default" style="font-size:12px;">
&lt;saf:div theme="ajax" id="weather" href="http://www.weather.com/weather?zip=97239"/&gt;
</pre>
</div></div>
<p>What this does after the HTML page is completely loaded, the specified URL will be retrieved asynchronously in the browser. The entire contents returned by that URL will be injected in to the div.</p>

<h3 id="ajaxdivtemplate-InitializingtheDiv">Initializing the Div</h3>

<p>Because the remote data isn't loaded immediately, it is sometimes useful to have some placeholder content that exists before the remote data is retrieved. The content is essentially just the body of the div element. For example:</p>
<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: xml; gutter: false; theme: Default" style="font-size:12px;">
&lt;saf:div theme="ajax" id="weather" href="http://www.weather.com/weather?zip=97239"&gt;
    Placeholder...
&lt;/saf:div&gt;
</pre>
</div></div>
<p>If you wish to load more complex initial data, you can use the <a shape="rect" href="https://cwiki.apache.org/confluence/pages/viewpage.action?pageId=97305">action</a> tag and the <em>executeResult</em> attribute:</p>
<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: xml; gutter: false; theme: Default" style="font-size:12px;">
&lt;saf:div theme="ajax" id="weather" href="http://www.weather.com/weather?zip=97239"&gt;
    &lt;ww:action id="weather" name="weatherBean" executeResult="true"&gt;
        &lt;ww:param name="zip" value="97239"/&gt;
    &lt;/ww:action&gt;
&lt;/saf:div&gt;
</pre>
</div></div>

<h3 id="ajaxdivtemplate-LoadingandErrorMessages">Loading and Error Messages</h3>

<p>If you'd like to display special messages when the data is being retrieved or when the data cannot be retrieved, you can use the <em>errorText</em> and <em>loadingText</em> attributes:</p>
<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: xml; gutter: false; theme: Default" style="font-size:12px;">
&lt;saf:div theme="ajax" id="weather" href="http://www.weather.com/weather?zip=97239"
        loadingText="Loading weather information..."
        errorText="Unable to contact weather server"&gt;
    Placeholder...
&lt;/saf:div&gt;
</pre>
</div></div>

<h3 id="ajaxdivtemplate-RefreshTimers">Refresh Timers</h3>

<p>Another feature this div template provides is the ability to refresh data on a timed basis. Using the <em>updateFreq</em> and the <em>delay</em>attributes, you can specify how often the timer goes off and when the timer starts (times in milliseconds). For example, the following will update every minute after a two second delay:</p>
<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: xml; gutter: false; theme: Default" style="font-size:12px;">
&lt;saf:div theme="ajax" id="weather" href="http://www.weather.com/weather?zip=97239"
        loadingText="Loading weather information..."
        errorText="Unable to contact weather server"&gt;
        delay="2000"
        updateFreq="60000"
    Placeholder...
&lt;/saf:div&gt;
</pre>
</div></div>

<h3 id="ajaxdivtemplate-ListeningforEvents">Listening for Events</h3>

<p>The <a shape="rect" href="a.html">a</a> tag (specifically the <a shape="rect" href="ajax-a-template.html">ajax a template</a>) and the div tag support an <a shape="rect" href="ajax-event-system.html">ajax event system</a>, providing the ability to broadcast events to topics. You can specify the <strong>topics</strong> to listen to using a comma separated list in the <em>listenTopics</em> attribute. What this means is that when a topic is published, usually through the <a shape="rect" href="ajax-a-template.html">ajax a template</a>, the URL specified in the <em>href</em> attribute will be re-requested.</p>
<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: xml; gutter: false; theme: Default" style="font-size:12px;">
&lt;saf:div theme="ajax" id="weather" href="http://www.weather.com/weather?zip=97239"
        loadingText="Loading weather information..."
        errorText="Unable to contact weather server"
        listenTopics="weather_topic,some_topic"&gt;
    Placeholder...
&lt;/saf:div&gt;
&lt;saf:a id="link1"
      theme="ajax"
      href="refreshWeather.action"
      notifyTopics="weather_topic,other_topic"
      errorText="An Error ocurred"&gt;Refresh&lt;/saf:a&gt;
</pre>
</div></div>

<h3 id="ajaxdivtemplate-JavaScriptSupport">JavaScript Support</h3>

<p>There are also javascript functions to refresh the content and stop/start the refreshing of the component. For the remote div with the component id "remotediv1":</p>

<p>To start refreshing use the javascript:</p>
<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">
remotediv1.startTimer();
</pre>
</div></div>
<p>To stop refreshing use the javascript:</p>
<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">
remotediv1.stopTimer();
</pre>
</div></div>
<p>To refresh the content use the javascript:</p>
<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">
remotediv1.refresh();
</pre>
</div></div>

<h4 id="ajaxdivtemplate-JavaScriptExamples:">JavaScript Examples:</h4>

<p>To further illustrate these concepts here is an example. Say you want to change the url of a div at runtime via javascript. Here is what you need to do:<br clear="none">
What you will need to do is add a JS function that listens to a JS event that publishes the id from the select box that was selected.  It will modify the URL for the div (adding the id so the correct data is obtained) and then bind() the AJAX div so it refreshes.</p>
<div class="code panel pdl" style="border-width: 1px;"><div class="codeContent panelContent pdl">
<pre class="brush: java; gutter: false; theme: Default" style="font-size:12px;">
&lt;saf:head theme="ajax" /&gt;

&lt;script type="text/javascript"&gt;
    function updateReports(id) {
       var reportDiv= window['reportDivId'];
       reportDiv.href = '/../reportListRemote.action?selectedId='+id;
       reportDiv.refresh();
    }
    dojo.event.topic.getTopic("updateReportsListTopic").subscribe(null, "updateReports");
&lt;/script&gt;

&lt;form ... &gt;
&lt;saf:select .... onchange="javascript: dojo.event.topic.publish("updateReportsListTopic", this.value); " /&gt;

&lt;saf:div id="reportDivId" theme="ajax" href="/.../reportListRemote.action" &gt;
  Loading reports...
&lt;/saf:div&gt;
&lt;/form&gt;
</pre>
</div></div></div>
        </div>

        
    </div>
</div>
<div class="footer">
    Generated by CXF SiteExporter
</div>
</body>
</html>
